<!DOCTYPE html>
<html>
<head>
	<title>函数</title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1{
			width:200px;
			height: 200px;
			border:2px solid;
		}
	</style>

</head>
<body>
	<div id="div1"></div>
	<button id="se" onclick="changebg('red')">变红</button>
	<button id="lv" onclick="changebg('green')">变绿</button>
	<button id="yel" onclick="changebg('yellow')">变黄</button>
	<!-- 要点：1.函数基本结构 function 函数名 (参数){ 执行代码} 
		2.单独定义函数时必须是有名函数,当函数前有赋值符号时可定义为匿名函数
		3.函数定义后，必须调用才能产生效果调用方法是函数名()
		4.①参数的个数是根据函数的功能来确定的，
		②函数定义时小括号内的参数是形参  函数调用时小括号内的参数是实参，
		③实参必须是确定的值，这个确定的值可以是表达式，也可以是变量，还可以是函数，
		④实参和形参在数量和顺序上保持一致性
		⑤实参传给形参，顺序不可逆
		5.行内调用的函数必须是全局的函数
	-->
		
	<script type="text/javascript">
		// 一、有名和匿名函数
		function tan(){
			alert("123");
		}

		// tan();

		var a = function (){}

		// 二、有参和无参函数
		// 函数功能：计算任意两个数的和
		// var x = prompt("请输入任意值");
		// var y = prompt("请输入任意值");
		
		// he(x,y);
		// alert(he(3,5));

		// 函数功能：自报家门 姓名 身高  年龄 性别
		function bao(name,tall,age,sex){
			console.log("我叫" + name + "身高是" + tall + "今年"+age + "我是" + sex);
		}

		bao(38,"男的","170cm","张三");

		// 函数功能：点击按钮div背景变红
		// 方法一：无参函数
	/*	var btn = document.getElementById("se");
		// console.log(btn);
		var odiv = document.getElementById("div1");
		// console.log(odiv);
		var btn2 = document.getElementById("lv");
		// console.log(btn);
		var btn3 = document.getElementById("yel");
		// console.log(btn);
		btn.onclick = function(){
			odiv.style.background = "red";
		}

		btn2.onclick = function(){
			odiv.style.background = "green";
		}

		btn3.onclick = function(){
			odiv.style.background = "yellow";
		}*/
		// 上面的写法可以实现效果没有问题，但是它的可复用性差，可维护性也差，代码量多


		// 方法二：有名函数 传参调用
		var odiv = document.getElementById("div1");
		function changebg(cl){
			odiv.style.background = cl;
		}

		// 思考题：点击相应颜色按钮，让按钮的颜色变成相应的
		function he(m1,b7){
			return m1 + b7;	
		}

		
		/*var a = 10;
		// alert("第一次声明a的" +a);


		var a = 100;
		alert("第2次声明a的" +a);*/

		function ju1(){
			var b = 38;
			console.log(b);
		}

		ju1();

		function ju2(){
			var b = 98;
			console.log(b);
		}

		ju2();
		alert(b);

		var x;
		console.log(x);




	</script>
</body>
</html>